<template>
  <div class="price-setting">
    <div class="price-setting-title">
      <b>商品信息</b>
    </div>
    <el-table
      class="m-t-10"
      :data="tableData">
      <el-table-column
        align="center"
        label="序号"
        prop="serialNumber"
      ></el-table-column>

      <el-table-column
        align="center"
        label="商品名称"
        prop="goodsName"
      ></el-table-column>

      <el-table-column
        align="center"
        label="产地"
        prop="originPlace"
      ></el-table-column>

      <el-table-column
        align="center"
        label="牌号"
        prop="brand"
      ></el-table-column>

      <el-table-column
        align="center"
        label="规格"
        prop="specification"
      ></el-table-column>

      <el-table-column
        align="center"
        label="数量"
        prop="amount"
      ></el-table-column>

      <el-table-column
        align="center"
        label="件数"
        prop="units"
      ></el-table-column>

      <el-table-column
        align="center"
        label="签收时间"
        prop="signTime"
      ></el-table-column>

      <el-table-column
        align="center"
        label="单价-采购价（元）"
      >
      <template slot-scope="scope">
        <span
          v-if="scope.row.edit == false"
        >{{scope.row.price1}}</span>
        <el-input
          v-if="scope.row.edit == true"
          v-model="scope.row.price1">
        </el-input>
      </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="单价-销售价（元）"
      >
        <template slot-scope="scope">
        <span
          v-if="scope.row.edit == false"
        >{{scope.row.price2}}</span>
        <el-input
          v-if="scope.row.edit == true"
          v-model="scope.row.price2">
        </el-input>
      </template>
      </el-table-column>

      <el-table-column
        align="center"
        label="操作"
      >
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.edit == false"
            type="text"
            size="small"
            @click="scope.row.edit = true;"
            >编辑
          </el-button>
          <el-button
            v-if="scope.row.edit == true"
            type="text"
            size="small"
            @click="scope.row.edit = false;"
            >保存
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="text-center m-t-20">
      <el-button
        @click="close"
        type="warning">关闭</el-button>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    orderData: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data(){
    return {
      tableData: [
        {
          serialNumber: "1", // 序号
          goodsName: '钢铁001', // 商品名称
          originPlace: '广东省韶关市曲江区', // 产地
          brand: '0012', // 牌号
          specification: 'LO215', // 规格
          amount: '2', // 数量
          units: '1', // 件数
          signTime: '2022-04-16 12：00：00', // 签收时间
          price1: '', // 单价-采购价（元）
          price2: '', // 单价-销售价（元）
          edit: false, // 能否编辑
        },
        {
          serialNumber: "2", // 序号
          goodsName: '钢铁002', // 商品名称
          originPlace: '广东省韶关市曲江区', // 产地
          brand: '0013', // 牌号
          specification: 'LO216', // 规格
          amount: '8', // 数量
          units: '2', // 件数
          signTime: '2022-04-17 12：00：00', // 签收时间
          price1: '', // 单价-采购价（元）
          price2: '', // 单价-销售价（元）
          edit: false, // 能否编辑
        }
      ]
    }
  },
  methods: {
    close(){
      this.$emit('close');
    }
  }
}
</script>

<style lang="scss">
.price-setting{
  .price-setting-title{
    border-bottom: 1px solid #ccc;
  }
}
</style>